import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Card, Modal, Tag, Col, Image } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from "react-redux";
import { commodityDelete, update } from '../../services/commodity';
import { setAlterState, setCommodityData } from '../../store/slice/commoditySlice';
import {url} from '../../services/index'
const { Column } = Table;
export default function List({ commodity, pagination, show }) {
    let dispatch = useDispatch()
    const { confirm } = Modal;
    const [imgState, setImgState] = useState(false)
    const [id, setId] = useState()
    const [img,setImg]=useState([])
    const handleChange = ({ current, pageSize }) => {
        show({ current, pageSize });
    }

    const deleteBtn = (e) => {
        confirm({
            title: "删除",
            icon: <ExclamationCircleOutlined />,
            content: '是否确定删除此数据！',
            async onOk() {
                await commodityDelete(id)
                show()
            },
        });
    }
    const updateBtn = async () => {
        console.log(true);
        let { data } = await update(id)
        console.log("修改", data);
        dispatch(setAlterState(true))
        dispatch(setCommodityData(data))
    }
    let imgBtn = async() => {
        setImgState(true);
        let { data } = await update(id)
        setImg(data.images)
    }
   
    let handleOk = async () => {
        setImgState(false);
     }
    let handleCancel = () => {
        setImgState(false);
     }
    return (
        <>
            <Table
                onRow={record => {
                    return {
                        onMouseEnter: event => {
                            setId(record._id)
                        }
                    }
                }}
                rowKey="_id"
                onChange={handleChange}
                dataSource={commodity} bordered={true} pagination={pagination}>
                <Column title="商品名" ellipsis={true} dataIndex="name" key="name" />
                <Column title="原价" dataIndex="oldPrice" key="oldPrice" height="100px" />
                <Column title="现价" dataIndex="newPrice" key="newPrice" height="100px" />
                <Column title="运费" dataIndex="freight" key="freight" height="100px" />
                <Column title="颜色" dataIndex="color" key="color" height="100px" />
                <Column title="商品大小" dataIndex="size" key="size" height="100px" />
                <Column title="商品简介" ellipsis={true} dataIndex="intro" key="intro" width="200px" />
                <Column title="库存" dataIndex="stock" key="stock" height="100px" />
                <Column title="商品图片"
                    render={(text, record) => (
                        <Space size="middle" >
                            <Button type="primary" id={record._id} onClick={imgBtn} >查看</Button>
                        </Space>
                    )}
                    key="types" height="100px" />
                <Column title="类型"
                    render={(text, record) => (
                        <Space size="middle" >
                            <div>{record.types.sort}</div>
                        </Space>
                    )}
                    key="types" height="100px" />
                <Column
                    span={2}
                    title="操作"
                    width="200px"
                    key="action"
                    render={(text, record) => (
                        <Space size="middle" >
                            <Button type="primary" id={record._id} onClick={updateBtn} >修改</Button>
                            <Button type="primary" id={record._id} danger onClick={deleteBtn}>删除</Button>
                        </Space>
                    )}
                />

            </Table>
            <Modal title="查看图片" visible={imgState} onOk={handleOk} onCancel={handleCancel}>
                {img.map((image, i) =><Image
                    width={200}
                    src={url+"/images/"+image}
                />)}
            </Modal>
        </>
    )
}
